<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '组员任务',
			size: '65%'
		}"
		show-confirm
		confirm-text="添加组员任务"
		@confirm="addGroupTask"
		@close="close"
	>
		<el-form label-position="top">
			<el-form-item label="总目标">
				<el-card shadow="never" v-if="chooseMemberTask">
					<el-row :gutter="20">
						<el-col :span="4">
							<cl-filter label="月份：">{{ chooseMemberTask.date }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="事业部：">{{ chooseMemberTask.biz_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="部门：">{{ chooseMemberTask.dept_name }}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="分公司：">{{
								chooseMemberTask.company_name
							}}</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="品牌：">{{ chooseMemberTask.bra_name }}</cl-filter>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="4">
							<cl-filter label="加微数(月)：">
								<span class="color-danger">
									{{ chooseMemberTask.vorder_total }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="加微数(日)：">
								<span class="color-danger">
									{{ chooseMemberTask.vorder_day }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="新客定金数(月)：">
								<span class="color-danger">
									{{ chooseMemberTask.old_new_vorder_total }}
								</span>
							</cl-filter>
						</el-col>
						<el-col :span="4">
							<cl-filter label="新客定金数(日)：">
								<span class="color-danger">
									{{ chooseMemberTask.old_new_vorder_day }}
								</span>
							</cl-filter>
						</el-col>
					</el-row>
				</el-card>
			</el-form-item>
			<el-form-item label="组员目标">
				<el-card shadow="never">
					<cl-data-table
						ref="table"
						v-loading="loading"
						border
						:data="list"
						:columns="columns"
						:show-page="false"
					>
					</cl-data-table>
				</el-card>
			</el-form-item>
		</el-form>
		<edit-group-task ref="editGroupTask" @confirm="getGroupTaskList" />
		<add-group-task ref="addGroupTask" :info="chooseMemberTask" @confirm="getGroupTaskList" />
	</cl-drawer>
</template>
<script>
import EditGroupTask from "./edit-group-task";
import AddGroupTask from "./add-group-task";
export default {
	name: "group-task",
	components: {
		EditGroupTask,
		AddGroupTask
	},
	data() {
		return {
			chooseMember: {},
			chooseMemberTask: {},
			columns: [
				{ type: "index", label: "序号", align: "center", width: 50, fixed: true },
				{
					label: "人员",
					prop: "name",
					minWidth: 100,
					formatter: (row) => `${row.user.user_name}`
				},
				{ label: "加微数(月)", prop: "vorder_total", minWidth: 100 },
				{ label: "加微数(日)", prop: "vorder_day", minWidth: 100 },
				{ label: "新客定金数(月)", prop: "old_new_vorder_total", minWidth: 100 },
				{ label: "新客定金数(日)", prop: "old_new_vorder_day", minWidth: 100 },
				{
					label: "操作",
					prop: "opt",
					width: 180,
					fixed: "right",
					render: ({ row }) => {
						return (
							<div>
								<el-button
									type="warning"
									plain
									onClick={() => this.editGroupTask(row)}>
									修改
								</el-button>
								<el-button onClick={() => this.removeGroupTask(row)}>
									删除
								</el-button>
							</div>
						);
					}
				}
			],
			// 组员目标
			list: [],
			loading: false,
			ischange: false
		};
	},
	methods: {
		open(data = {}) {
			this.chooseMember = data;
			this.$refs.drawer.create();
			this.getGroupTaskList();
		},
		close() {
			this.chooseMember = {};
			this.$emit("close");
		},
		// 组员目标列表
		async getGroupTaskList() {
			const { p_id } = this.chooseMember;
			if (!p_id) return;
			this.loading = true;
			const data = await this.$service.preSale.teamdetails({ p_id }).finally(() => {
				this.loading = false;
			});
			this.chooseMemberTask = data;
			this.list = data.plan_person;
		},
		addGroupTask() {
			this.$refs.addGroupTask.open();
		},
		// 修改组员
		editGroupTask(row) {
			const { event_month } = this.chooseMember;
			this.$refs.editGroupTask.open({ ...row, event_month });
		},
		// 删除组员
		removeGroupTask({ team_id }) {
			this.confirm("是否执行此操作?")
				.then(async () => {
					await this.$service.preSale.teamtargetdel({ team_id });
					this.$message.success("操作成功");
					this.getGroupTaskList();
				})
				.catch(() => {});
		}
	}
};
</script>
